<template>
  <div class="product-detail">
    <van-nav-bar
      title="商品详情"
      left-arrow
      @click-left="goBack"
      fixed
    />
    
    <div class="content" style="padding-top: 46px; padding-bottom: 50px;">
      <van-swipe class="product-swipe">
        <van-swipe-item>
          <img :src="product.image" :alt="product.title">
        </van-swipe-item>
      </van-swipe>

      <div class="info">
        <h2 class="title">{{ product.title }}</h2>
        <div class="price">¥{{ product.price }}</div>
        <div class="desc">{{ product.description }}</div>
      </div>

      <van-cell-group title="商品规格">
        <van-cell v-for="(spec, index) in product.specs" :key="index" :title="spec"/>
      </van-cell-group>
    </div>

    <!-- 底部操作栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartCount" to="/cart"/>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addToCart"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="buyNow"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { getProductDetail } from '@/api'
import { mapState } from 'vuex'

export default {
  name: 'ProductDetail',
  data() {
    return {
      product: {
        id: '',
        title: '',
        price: 0,
        image: '',
        description: '',
        specs: []
      }
    }
  },
  computed: {
    ...mapState({
      cartList: state => state.cartList
    }),
    cartCount() {
      return this.cartList.length || ''
    }
  },
  created() {
    this.fetchProductDetail()
  },
  methods: {
    async fetchProductDetail() {
      try {
        const res = await getProductDetail(this.$route.params.id)
        if (res.code === 0) {
          this.product = res.data
        }
      } catch (error) {
        console.error(error)
      }
    },
    addToCart() {
      this.$store.commit('addToCart', this.product)
      this.$dialog.confirm({
        title: '添加成功',
        message: '是否前往购物车？',
        confirmButtonText: '去购物车',
        cancelButtonText: '继续购物'
      }).then(() => {
        this.$router.push({
          path: '/cart',
          query: { from: 'detail' }
        })
      }).catch(() => {
        this.$toast('已加入购物车')
      })
    },
    buyNow() {
      this.$store.commit('addToCart', this.product)
      this.$router.push({
        path: '/cart',
        query: { from: 'detail' }
      })
    },
    goBack() {
      const { from } = this.$route.query
      if (from === 'cart') {
        this.$router.push('/cart')
      } else if (from === 'category') {
        this.$router.push('/category')
      } else {
        this.$router.push('/')
      }
    }
  }
}
</script>

<style scoped>
.product-swipe {
  height: 300px;
}
.product-swipe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info {
  padding: 15px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.price {
  color: #f44;
  font-size: 20px;
  margin: 10px 0;
}
.desc {
  color: #999;
  font-size: 14px;
  line-height: 1.5;
}
</style> 